<template>
    <div class="container">

        <div class="body_wrap">

            <el-card shadow="hover" ref="content_card">

                <!-- 基本搜索+功能按钮 -->
                <el-form ref="search" :inline="true" :model="queryParams" size="medium" label-width="">
                    <el-card class="table_tool_bar_wrap" shadow="never">
                        <div class="base_wrap">
                            <div class="left">
                                <el-form-item label="" prop="keyword">
                                    <el-input placeholder="请输入：登录账号/姓名" v-model="queryParams.keyword" clearable/>
                                </el-form-item>
                                <el-button @click="handleSearch" type="primary" size="medium">搜索</el-button>
                                <el-button @click="handleReset" type="info" plain size="medium">重置</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-form>

                <!-- 表格工具栏 -->
                <div class="table_min_tools">
                    <TableTools
                        :columnList.sync="columnList"
                        @handleCheckAllChange="handleCheckAllChange"
                        @handleFullscreen="handleFullscreen('content_card')"
                        @handleReload="handleReload"
                        @handleStripe="handleStripe"/>
                </div>

                <!-- 表格 -->
                <el-table
                    ref="table"
                    size="medium"
                    height="650"
                    empty-text="暂无数据"
                    element-loading-text="给我一点时间"
                    fit border highlight-current-row
                    :stripe="stripe"
                    v-loading="loading"
                    :data="dataList"
                    @selection-change="handleSelection">

                    <el-table-column type="selection" width="55" prop="selection" v-if="isHideColumn('selection')" align="center"></el-table-column>
                    <el-table-column label="序号" type="index" prop="index" v-if="isHideColumn('index')" width="60" align="center" />
                    <el-table-column label="头像" prop="avatar" v-if="isHideColumn('avatar')" align="center" width="100">
                        <template slot-scope="scope">
                            <div style="display:flex;justify-content: center;">
                                <el-avatar :size="30" :src="scope.row.avatar">
                                    <img src="https://dev-file.iviewui.com/userinfosvaY5tb7yfnSFTTimcjy3vuSG6RC28v2/avatar"/>
                                </el-avatar>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="用户名" prop="username" v-if="isHideColumn('username')" align="left" show-overflow-tooltip/>
                    <el-table-column label="姓名" prop="realname" v-if="isHideColumn('realname')" align="left" show-overflow-tooltip/>
                    <el-table-column label="手机" prop="mobile" v-if="isHideColumn('mobile')" align="left" show-overflow-tooltip/>
                    <el-table-column label="邮箱" prop="email" v-if="isHideColumn('email')" align="left" show-overflow-tooltip/>
                    <el-table-column label="性别" prop="sex" v-if="isHideColumn('sex')" align="center">
                        <template slot-scope="scope">
                            <el-tag type="primary" size="small" v-if="scope.row.sex === '1'">男</el-tag>
                            <el-tag type="success" size="small" v-else-if="scope.row.sex === '2'">女</el-tag>
                            <el-tag type="danger" size="small" v-else>保密</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="创建时间" prop="ctime" v-if="isHideColumn('ctime')" align="left" width="160" show-overflow-tooltip/>

                    <el-table-column label="操作" prop="btn" v-if="isHideColumn('btn')" width="200px" align="left" fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="handleCompulsionLogOut(scope.row)" v-if="scope.row.username !== 'admin'" type="text" size="small">退出</el-button>
                        </template>
                    </el-table-column>

                </el-table>

            </el-card>


        </div>
    </div>
</template>

<script>

import { isAuth } from '@/libs/auth'
import TableMixin from '@/mixin/TableMixin'
import TableTools from '@/views/components/table/table-tools'
import TablePagination from '@/views/components/table/table-pagination'
import { mapGetters } from 'vuex'
export default {
    mixins: [TableMixin],
    components: {
        TableTools,
        TablePagination,
    },

    computed: {
        ...mapGetters(['user'])
    },

    data() {
        return {
            dataList: [],
            loading: false,
            drawerVisible: false,
            selectionRows: [],
            searchFlag: true,
            queryParams: {
                order: 'username',
                asc: false,
                keyword: null,
                realname: null,
                username: null,
                password: null,
                salt: null,
                mobile: null,
                email: null,
                avatar: null,
                sex: null,
                birthday: null,
                status: null,
                superAdmin: null,
                ctime: null,
                utime: null
            },

        }
    },

    created() {
    },

    mounted() {
        this.$nextTick(() => {
            this.getDataList()
        })
    },

    methods: {

        /**
         * 强制在线用户退出登录
         */
        async handleCompulsionLogOut(row) {
            let ids = []
            if (row) {
                ids.push(row.id)
            }
            if(this.selectionRows) {
                this.selectionRows.filter((item, index) => {
                    ids.push(item.id)
                })
            }
            if (ids.length <= 0) {
                this.$notify({ title: '提示', message: '请选择需要退出登录的用户！', type: 'info' });
            } else {
                const confirm = await this.$confirm('确定要退出？', '提示', { type: 'warning' }).catch(() => {})
                if(confirm) {
                    const res = await this.$http({
                        url: '/system/user/compulsionLogOut',
                        method: 'POST',
                        data: ids
                    })
                    if (this.ResultMessage(res)) {
                        this.getDataList()
                    }
                }
            }
        },

        /**
         * 详细信息
         */
         async getInfo(id) {
            if (id) {
                const res = await this.$http({
                    url: '/system/user/info/' + id,
                    method: 'GET'
                })
                this.detail = Object.assign({}, res.data)
            }
        },

        /**
         * 获取表格数据
         */
        async getDataList() {
            this.loading = true
            const res = await this.$http({
                url: '/system/user/online',
                method: 'GET',
                params: this.queryParams
            })
            if (this.ResultMessage(res, false)) {
                this.dataList = res.data

                this.dataList.forEach((item, index) => {
                    if(item.roles) {
                        let roles = []
                        item.roles.forEach((k, i) => {
                            roles.push(k.name)
                        })
                        item.roles = roles
                    }
                })

            }
            this.loading = false
        },



        /**
         * 搜索
         */
        handleSearch() {
            this.getDataList()
        },
        /**
         * 重新加载数据表格
         */
        handleReload() {
            this.getDataList()
        },
        /**
         * 重置搜索表单
         */
        handleReset() {
            this.handleResetPage()
            this.$refs.search.resetFields()
            this.getDataList()
        },

    }

}
</script>

<style lang="scss" scoped>
.tipView{
    padding: 5px;
}
</style>
